<div class="container-fluid">
    <div ng-include="'views/appbar.html'"></div>
    <div class="card am-fade-and-slide-top" ng-show='up' style='min-height: 500px; line-height: 2;'>
        <div ng-hide="clusterDiscoveryTimedOut">
             <h3 class="text-info">New Calamari Installation</h3>

            <p style='width: 40em;'>This appears to be the <span class='text-info'>first</span> time you have started
                Calamari and there are no clusters currently configured.</p>
            <div ng-if='hosts.pre.length > 0'>
                <p ng-if='hosts.accepted'>There are <span class='badge'>{{hosts.accepted.length}}</span> host(s) currently
                    registered with Calamari.</p>
                <p ng-if='hosts.pre'>I have detected <span class='badge'>{{hosts.pre.length}}</span> host(s) requesting
                    registration.</p>
                <div class="row">
                    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
                         <h4 class='text-info'>Hosts Requesting to Be Managed By Calamari</h4>

                        <ol>
                            <li ng-repeat='key in hosts.pre'><span class='text-primary'>{{key.id}}</span>

                            </li>
                        </ol>
                    </div>
                </div>
                <div class='row'>
                    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 col-md-offset-1 col-lg-offset-1">
                        <div style='margin-top: 15px;'>
                            <button ng-disabled='addDisabled' class='btn btn-primary' ng-click='acceptAll()'>ADD</button>
                        </div>
                    </div>
                    <div style='margin-top: 30px;' class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
                        <p class='text-warning'>You will not be able to perform any other actions until some hosts have been added
                            to Calamari, either via this page or from the Command Line.</p>
                    </div>
                </div>
            </div>
            <div ng-if='hosts.pre.length === 0'>
                <div style='width: 40em;' ng-if='hosts.accepted.length === 0'>
                    <p>Calamari server is ready to start monitoring your Ceph servers. Please use the <code>ceph-deploy calamari connect [nodes]</code> command
                        to connect your Ceph servers to Calamari.</p>
                     <h4>Example</h4>

<pre>
# ceph-deploy calamari connect node1 node2 node3
</pre>

                </div>
                <div style='width: 40em;' ng-if='hosts.accepted.length > 0'>
                    <p><span class='badge text-info'>{{hosts.accepted.length}}</span> Ceph servers are
                        connected to Calamari, but no Ceph cluster has been created yet. Please use <code>ceph-deploy</code> to
                        create a cluster; please see the Inktank Ceph Enterprise documentation for more
                        details.</p>
                </div>
                <div ng-show='debug'>{{ hosts | json }}</div>
            </div>
        </div !-- card -->
        <div style="margin-left: 10px;" ng-show="clusterDiscoveryTimedOut">
             <h3 class="text-info"><i style="color: orange;" class="fa fa-lg fa-warning"></i> No Cluster Available</h3>

            <p style="width: 40em;">We apologize, but we can't seem to find a Ceph Cluster deployed on your servers
                at this time. This may be due to an incomplete installation of Ceph or Calamari.
                Please consult the documentation at <a href="http://ceph.com/docs/master/rados/deployment/">ceph.com</a> and
                work through all the recommended steps to see if any were missed.</p>
            <p style="width: 40em;">Once you have identified the problem, simply reload this page and the UI should
                initialize itself correctly.</p>
        </div>
    </div>
